<template>
	<view class="page_head">
		<view class="Select_parcel_nav">
			<view :class="cat_id == 0?'Select_parcel_titles':'Select_parcel_title'" @click="pick_nav(0)">全部</view>
			<view :class="cat_id == item.id?'Select_parcel_titles':'Select_parcel_title'" v-for="(item,index) in cat_list" :key="index" @click="pick_nav(item.id)">{{item.name}}</view>
		</view>
		<view class="detail-page">
		  <view class="detail-video">
		    <video :src="video_url"
		      :show-fullscreen-btn="showBtn" :enable-progress-gesture="enableProgress"></video>
		  </view>
		  <view class="list_head">
		    <view class="item_head" v-for="(item,index) in list" :key="index" @click="get_play(item.id)">
		  <!--    <video :controls="false" :show-center-play-btn="false"
		        src="https://www.mulehorse.com/web/uploads/video/store_1/02cd032ff98ea4242db8d3d7e50788ac5f5b64a4.mp4"></video> -->
				<image :src="item.cover_pic" mode=""></image>
		    </view>
		  </view>
		</view>
		<view class="bottom_msg">
			没有更多了~
		</view>
	</view>
</template>

<script>
	import Camera from "@/api/Camera/Camera.js";
	export default {
		data() {
			return {
				list: [],
				cat_id:0,
				page:1,
				cat_list:[],
				video_url:''
			};
		},
		components: {},
		onLoad(e) {
			this.get_Camera();
		},
		onShow() {
			if(this.list.length > 0){
				this.get_play(this.list[0].id);
			}
		},
		created(e) {},
		filters: {},
		//触底加载
		onReachBottom: function() {
			this.page = this.page + 1;
			this.get_Camera();
		},
		methods: {
			//点击获取视频链接
			async get_play(device_id){
				try {
					var params = {
						device_id:device_id
					};
					const res = await  Camera.play(params);
					if (res.code == 0) {
						this.video_url = res.data.url;
					}
				} catch (e) {
				}
			},
			//选择分类
			pick_nav(cat_id){
						  this.cat_id = cat_id;
						  this.page=1;
						  this.get_Camera();
			},
			//摄像列表
			async get_Camera() {
				try {
					var params = {
						cat_id  :this.cat_id,
						page:this.page
					};
					const res = await  Camera.device(params);
					if (res.code == 0) {
						if(this.page == 1){
							this.list = res.data.list;
							this.cat_list = res.data.cat_list;
							this.get_play(this.list[0].id);
						}else{
							this.cat_list = this.cat_list.concat(res.data.list)
						}
					}
				} catch (e) {
				} 
			},
		},
	};
</script>

<style scoped>
	/* pages/problemDetail/problemDetail.wxss */
	.detail-video video{
	  width: 100%;
	}
	.detail-txt{
	  margin: 24rpx;
	}
	page{
	  width: 100%;
	  height: 100%;
	  background-color: #b1b1b1;
	}
	.list_head{
	  width: 95%;
	  display: flex;
	  justify-content: space-between;
	  margin: auto;
	  flex-wrap: wrap;
	}
	.item_head{
	  width: 48%;
	  height: 300rpx;
	  border-radius: 25rpx;
	  margin-top: 20rpx;
	}
	.item_head image{
	  width: 100%;
	  height: 100%;
	  border-radius: 25rpx;
	}
	.item_head video{
	  width: 100%;
	  height: 100%;
	  border-radius: 25rpx;
	}
	.bottom_msg{
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #646464;
	}

	.Select_parcel_titles {
		color: #000000;
		border-bottom: 6rpx solid #00aa00;
		padding-bottom: 4rpx;
	}

	.Select_parcel_title {
		color: #868686;
		border-bottom: 6rpx solid #FFFFFF;
		padding-bottom: 4rpx;
	}

	.Select_parcel_nav {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: #FFFFFF;
	}

	.page_head {
		width: 100%;
		min-height: 100vh;
		background: #f1f1f1;
	}
</style>
